<template>
  <div id="post">
    <!-- 文章内容 -->
      <b-row class="py-3">
        <div class="content markdown-body">
          <vue-markdown :source="post.content" v-highlight></vue-markdown>
        </div>
      </b-row>
      
      <b-row>
          <b-col class="like py-3 d-flex flex-column align-items-center  justify-content-center">
            <b-link><i class="zi zi_digg zi_2x"></i></b-link>
            <div class="fw-light">点赞</div>
          </b-col>
      </b-row>

      <b-row class="post-nav mx-3">
        <!-- 上一篇 , 下一篇  -->
        <b-col class="col-5">
          <b-link
            class="d-block d-flex align-items-center"
            :to="{ name: 'detail', params: { id: previousPost.id } }"
            v-if="previousPost.id"
          >
            <i class="zi zi_circleLeftLong zi_2x"></i>
            <span class="title mx-2">{{previousPost.title}}</span>
          </b-link>
          <div class="d-flex align-items-center" v-else>
            <i class="zi zi_circleLeftLong zi_2x"></i>
            <span class="title mx-2">没有上一篇了</span>
          </div>
        </b-col>
        <b-col class="col-5 offset-2">
          <b-link
            class="d-block d-flex align-items-center justify-content-end"
            :to="{ name: 'detail', params: { id: nextPost.id } }"
            v-if="nextPost.id"
          >
            <span class="title mx-2">{{nextPost.title}}</span>
            <i class="zi zi_circleRightLong zi_2x"></i>
          </b-link>
          <div v-else class="d-flex align-items-center justify-content-end">
            <span class="title mx-2">没有下一篇了</span>
            <i class="zi zi_circleRightLong zi_2x"></i>
          </div>
        </b-col>
      </b-row>
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown';
export default {
  name: "DetailPost",
  components: {
    VueMarkdown,
  },
  props:['previousPost', 'post', 'nextPost'],
};
</script>

<style lang="less" scoped>
.content {
  line-height: 180%;
  font-weight: 300 !important;
  font-family: "Raleway" !important;
}
.post-nav {
  .title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  a {
    color: #666;
    text-decoration: none;
  }
}
.like{
  a {
    color: #666;
    text-decoration: none;
  }
}
</style>